<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue helloWorld</title>

    <!-- vscode -->
    <script type="text/javascript" src="../../../libs/vue/vue.js"></script>
    <!-- niupi -->

    <style>
    [v-cloak] {
        display: none;
    }
    </style>
</head>
<body>
    <div id="app" @keydown.ctrl.alt="keyListener">
        <div>
            <h1>helloworld</h1>
            {{message}}
        </div>
        <div>
            <h1>插值表达式闪烁问题</h1>
            
            <!-- 还没加载完vue.js，界面一开始是显示{{message}} -->
            <p>普通插值表达式： {{message}} --------------</p>
            
            <!-- v-cloak在渲染完数据之后，会将diaplay:hidden去掉 -->
            <p v-cloak>v-cloak： {{message}} --------------</p>
            
            <!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换{{}} -->
            <p v-text="message">加载完vue后我就消失了</p>

            <!-- 如果字符串是html格式的，要用v-html -->
            <p v-html="message">加载完vue后我就消失了</p>
        </div>
        <div>
            <h1>跑马灯demo1</h1>
            <input type="button" value="浪起来" @click="startLang" :title="title + '!'"/>
            <input type="button" value="猥琐发育，别浪" @click="stopLang" :title="title"/>
            <p>{{demo1.data}}</p>
        </div>
        <div>
            <h1>条件与循环</h1>
            <p v-if="demo2.isShow">现在你看到我了</p>
            <ul>
                <li v-for="item in demo2.todos">
                    {{item.text}}
                </li>
            </ul>
        </div>
        <div>
            <h1>v-model双向绑定 和 侦听器</h1>
            <p>数据的双向绑定，就是 界面改变了，也会更新到vue的data中；vue的data改变了，也会更新到界面中</p>
            <p>{{ demo3.message }}</p>
            <input v-model="demo3.message">
        </div>
        <div>
            <h1>计算属性</h1>
            <p>计算前：{{ demo4.nowTime }}</p>
            <p>计算后：{{ demo4_nowTime }}</p>
        </div>
        <div>
            <h1>组件基础</h1>
            <button-counter></button-counter>
        </div>

    </div>

    <script>
    var vm;
    setTimeout(() => {
        //创建vue实例
        vm = new Vue({
            el : '#app'
            ,data : {
                message : '<font style="color: green">这是一个vue的helloworld</font>'
                ,title : '这是一个按钮'
                ,demo1 : {
                    timeId : null
                    ,data : 'vue真的是一个好东西'
                }
                ,demo2 : {
                    isShow : true
                    ,todos: [
                        { text: '学习 JavaScript' },
                        { text: '学习 Vue' },
                        { text: '整个牛项目' }
                    ]
                }
                ,demo3 : {
                    message : 'hello vue'
                }
                ,demo4 : {
                    nowTime : new Date()
                }
            }
            ,methods : {
                startLang : function(){
                    if(this.demo1.timeId) return;
                    //箭头函数可以解决this指向问题
                    var timeId = setInterval(() => {
                        var prefix = this.demo1.data.substring(0, 1)
                            ,suffix = this.demo1.data.substring(1);
                        this.demo1.data = suffix + prefix;
                    }, 300);
                    this.demo1.timeId = timeId;
                }
                ,stopLang : function(){
                    if(!this.demo1.timeId) return;
                    //箭头函数可以解决this指向问题
                    clearInterval(this.demo1.timeId);
                    this.demo1.timeId = null;
                }
                ,keyListener : function(){
                    alert("按下了ctrl + alt");
                }
            }
            ,computed : {
                demo4_nowTime : function(){
                    var date = this.demo4.nowTime;
                    //获取
                    var year=date.getFullYear();
                    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
                }
            }
            ,watch : {
                //侦听对象的属性
                "demo3.message" : function(newValue, oldValue){
                    console.info("newValue: " + newValue);
                    console.info("oldValue: " + oldValue);
                    console.info("");
                }
            }
        });
    }, '1000');

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    
    </script>

</body>
</html>